The DOM Tree at the Browser

This documentation is for an older version of ZK. For the latest one, please click here.

After porting XHMTL pages to ZK, you don't need to manipulate the DOM tree at the browser with JavaScript, though ZK doesn't prevent you from doing that. Rather, you manipulate XHTML components at the server, and then ZK engines updates the DOM tree at the browser for you.

It is convenient but there is a catch. ZK assumes the DOM tree at the browser is the same as the component tree at the server. In most cases, it is true. However, it is not always true.

The TABLE and TBODY Tags

The browser always creates TBODY between TABLE and TR. Thus, the following two tables have the same structure.

<table>
    <tr><td>Hi</td></tr>
</table>
<table>
    <tbody>
        <tr><td>Hi</td></tr>
    </tbody>
</table>

Unfortunately, their component trees are not the same in ZK. Thus, if you want to dynamically manipulate a table, you have to declare TBODY between TABLE and TR. Of course, you don't need to worry this for static tables.